<!DOCTYPE html>
<html>
<head>
	<title>index01.html</title>
	<meta charset="utf-8"/>
	<script src="./bower_components/react/react.js"></script>
	<script src="./bower_components/react/react-dom.js"></script>
	<script src="./bower_components/babel/browser.js"></script>

	<style>
		

	</style>
</head>
<body>
	<div id='app'></div>

	<script type="text/babel">

		class Life extends React.Component {
			constructor() {
				super();
				this.state = {
					msg: 'hello'
				}
			}

			componentWillMount() {
				console.log('组件挂载前');
				console.log(this.props, ";", this.state);
				console.log(document.querySelector('#div1'));
			}

			componentDidMount() {
				console.log('组件挂载后');
				console.log(document.querySelector('#div1'));
			}

			componentWillUpdate() {
				console.log('组件更新前');
			}

			componentDidUpdate() {
				console.log('组件更新后');
			}

			componentWillUnmount() {
				console.log('组件卸载之前');
			}

			render() {
				return (
					<div>
						<input type="text" onChange={this.change.bind(this)} />
						<input type="button" value="点击卸载" onClick={this.unMount.bind(this)} />
						<div id="div1">{this.state.msg}</div>
					</div>
				)
			}

			change(e) {
				this.setState({
					msg: e.target.value
				})
			}

			unMount(e) {
				// app.innerHTML = ''
				ReactDOM.render(<h1>abc</h1>, app);
			}
		}

		ReactDOM.render(<Life l= '1' />, app);
	</script>

</body>
</html> 